<template>
    <div class="enclosureComponent">
        <a-modal v-drag-modal class="enclosure_modal" title="添加知识产权" :visible="visible" :maskClosable="false"
            :width="700" @cancel="handleCancel">
            <template slot="footer">
                <a-button @click="handleCancel">取消</a-button>
                <a-button key="submit" type="primary" :disabled="disabled" @click="handleSubmit">保存</a-button>
            </template>
            <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
                <a-form-model-item ref="zscqLb" prop="zscqLb" label="类别" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-select class="selectList" v-model="ruleForm.zscqLb" placeholder="请选择类别" clearable>
                        <a-select-option v-for="(item, index) in categoryList" :value="item.value" :key="index">{{ item.value }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item ref="zscqMc" prop="zscqMc" label="名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-input v-model.trim="ruleForm.zscqMc" placeholder="请填写名称" />
                </a-form-model-item>
                <a-form-model-item ref="zscqGb" prop="zscqGb" label="国家(地区)" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-input v-model.trim="ruleForm.zscqGb" placeholder="请填写国家(地区)" />
                </a-form-model-item>
                <a-form-model-item ref="zscqSqha" prop="zscqSqha" label="授权号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-input v-model.trim="ruleForm.zscqSqha" placeholder="请填写授权号" />
                </a-form-model-item>
                <a-form-model-item ref="zscqSqrq" prop="zscqSqrq" label="授权日期" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-date-picker
                        format="YYYY-MM-DD"
                        v-model="ruleForm.zscqSqrq"
                        type="date"
                        placeholder="请选择授权日期"
                        style="width: 100%;"
                        @change="handelDateChange"
                    />
                </a-form-model-item>
                <a-form-model-item ref="zscqZsbh" prop="zscqZsbh" label="证书编号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-input v-model.trim="ruleForm.zscqZsbh" placeholder="请填写证书编号" />
                </a-form-model-item>
                <a-form-model-item ref="zscqQlrList" prop="zscqQlrList" label="权利人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <div class="zscqQlrList">
                        <span v-for="(tag, index) in ruleForm.zscqQlrList" :key="tag">
                            <a-tag @close="handleCloseQlr(tag)" closable>{{ tag }}</a-tag>
                        </span>
                        <a-input
                            v-if="inputVisible"
                            ref="input"
                            type="text"
                            size="small"
                            :style="{ width: '78px' }"
                            :value="inputValue"
                            @change="handleInputChange"
                            @blur="handleInputConfirmQlr"
                            @keyup.enter="handleInputConfirmQlr"
                        />
                        <a-tag v-else style="background: #fff; border-style: dashed;" @click="showInput">
                            <a-icon type="plus" />新增
                        </a-tag>
                    </div>
                </a-form-model-item>
                <a-form-model-item ref="zscqFmrList" prop="zscqFmrList" label="发明人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <div class="zscqFmrList">
                        <span v-for="(tag, index) in ruleForm.zscqFmrList" :key="tag">
                            <a-tag closable @close="handleCloseFmr(tag)">{{ tag }}</a-tag>
                        </span>
                        <a-input
                            v-if="zscqFmrVisible"
                            ref="zscqFmrInput"
                            type="text"
                            size="small"
                            :style="{ width: '78px' }"
                            :value="zscqFmrValue"
                            @change="handleInputChangeZscqFmr"
                            @blur="handleInputConfirmFmr"
                            @keyup.enter="handleInputConfirmFmr"
                        />
                        <a-tag v-else style="background: #fff; border-style: dashed;" @click="showZscqFmrInput">
                            <a-icon type="plus" />新增
                        </a-tag>
                    </div>
                </a-form-model-item>
                <a-form-model-item ref="zscqZt" prop="zscqZt" label="发明专利有效状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-select class="selectList" v-model="ruleForm.zscqZt" placeholder="请选择类别" clearable>
                        <a-select-option value="有效">有效</a-select-option>
                        <a-select-option value="无效">无效</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item prop="file" ref="file" label="上传文件" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                    <a-upload
                        accept='.pdf'
                        action="#"
                        :file-list="fileList"
                        :before-upload="beforeUpload"
                        :show-upload-list="showUploadList"
                    >
                        <a-button style="width: 120px;height: 40px;line-height: 40px;margin:0;background:#fff;color:#333;">
                            <a-icon type="upload" />{{ type == 2 ? '重新上传': '上传' }}
                        </a-button>
                        <p>支持拓展名.pdf</p>
                    </a-upload>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
import { cxjsb_zscqAdd, cxjsb_getZscq } from '@/api/shenbao'
export default {
    name: 'EnclosureComponent',
    props: ['showFlag', 'id', 'type'],
    data() {
        return {
            visible: false,
            disabled: false,
            inputVisible: false,
            zscqFmrVisible: false,
            inputValue: '',
            zscqFmrValue: '',
            ruleForm: {
                zscqQlrList: [],
                zscqFmrList: [],
                file: ''
            },
            rules: {
                zscqLb: [{ required: true, message: '请选择类别', trigger: 'change' }],
                zscqMc: [{ required: true, message: '请填写名称', trigger: 'blur' }],
                zscqGb: [{ required: true, message: '请填写国家(地区)', trigger: 'blur' }],
                zscqSqha: [{ required: true, message: '请填写授权号', trigger: 'blur' }],
                zscqSqrq: [{ required: true, message: '请选择授权日期', trigger: 'change' }],
                zscqZsbh: [{ required: true, message: '请填写证书编号', trigger: 'blur' }],
                zscqQlrList: [{ required: true, message: '请填写权利人', trigger: 'blur' }],
                zscqFmrList: [{ required: true, message: '请填写发明人', trigger: 'blur' }],
                zscqZt: [{ required: true, message: '请输入发明专利有效状态', trigger: 'change' }],
                file: [{ required: true, message: '请上传附件', trigger: 'change' }]
            },
            categoryList: [
                {
                    value: '发明专利'
                },
                {
                    value: '实用新型专利'
                },
                {
                    value: '软件著作权'
                }
            ],
            fileList: [],
            showUploadList: {
                showDownloadIcon: false,
                showRemoveIcon: false
            }
        }
    },
    watch: {
        showFlag(newVal, oldVal) {
            if (newVal != oldVal) {
                let self = this
                self.visible = true
                if (self.type === 2) {
                    self.getDetail()
                }
            }
        }
    },
    methods: {
        getDetail() {
            cxjsb_getZscq({
                cxj_cxj_id: this.$route.query.cxj_cxj_id,
                id: this.id
            }).then(res => {
                if (res.data.code == '200') {
                    console.log('详情', res.data.result);
                    let result = res.data.result;
                    this.ruleForm = result;
                    this.ruleForm.zscqQlrList = result.zscqQlr.split("、")
                    this.ruleForm.zscqFmrList = result.zscqFmr.split("、")
                    this.ruleForm.file = result.filePath
                    this.fileList.push({  
                        uid: result.id,    // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突  
                        name: result.fileName,   // 文件名  
                        status: 'done', // 状态有：uploading done error removed  
                        response: '{"status": "success"}', // 服务端响应内容  
                    })
                } else {
                    this.$message.warning(res.data.message)
                }
            })
        },
        handleCancel() {
            this.visible = false
            this.$refs.ruleForm.resetFields()
            this.ruleForm.file = '';
            this.fileList = [];
        },
        handleSubmit() {
            let self = this
            console.log('权利人==', self.ruleForm.zscqQlrList)
            console.log('发明人==', self.ruleForm.zscqFmrList)
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    self.disabled = true;
                    let formData = new FormData()
                    formData.append('cxj_cxj_id', self.$route.query.cxj_cxj_id)
                    formData.append('zscqLb', self.ruleForm.zscqLb)
                    formData.append('zscqMc', self.ruleForm.zscqMc)
                    formData.append('zscqGb', self.ruleForm.zscqGb)
                    formData.append('zscqSqha', self.ruleForm.zscqSqha)
                    formData.append('zscqSqrq', self.ruleForm.zscqSqrq)
                    formData.append('zscqZsbh', self.ruleForm.zscqZsbh)
                    formData.append('zscqQlr', self.ruleForm.zscqQlrList.join('、'))
                    formData.append('zscqFmr', self.ruleForm.zscqFmrList.join('、'))
                    formData.append('zscqZt', self.ruleForm.zscqZt)
                    formData.append('file', self.ruleForm.file)
                    if (self.type === 2) {
                        formData.append('id', self.id)
                    }
                    cxjsb_zscqAdd(formData).then(res => {
                        if (res.data.code == '200') {
                            self.handleCancel()
                            self.$message.success('操作成功')
                            self.$emit('enclosureEmit')
                            self.disabled = false
                        } else {
                            self.disabled = false
                            self.$message.error(res.data.message)
                        }
                    })
                    .catch(err => {
                        self.disabled = false
                    })
                }
            })
        },
        handelDateChange(date, dateString) {
            console.log(date, dateString);
            // this.ruleForm.zscqSqrq = dateString;
            this.$set(this.ruleForm, 'zscqSqrq', dateString)
        },
        beforeUpload(file) {
            if (file) {
                if (file.size > 50 * 1024 * 1024) {
                    // 此处判断上传文件的大小 , 单位为 b 故要乘以两个1024
                    this.$message.warning('文件最大为50兆')
                    return
                }
                /* else if (file.type !== 'application/pdf') {
                    // 此处判断上传文件的格式
                    this.$message.warning('请上传pdf格式的文件')
                    return
                } */
                else {
                    this.ruleForm.file = file
                    this.fileList = [file]
                }
            }
            return false
        },
        handleCloseQlr(removedTag) {
            const tags = this.ruleForm.zscqQlrList.filter(tag => tag !== removedTag)
            this.ruleForm.zscqQlrList = tags
            console.log('删除权利人', this.ruleForm.zscqQlrList);
        },
        handleCloseFmr(removedTag) {
            const tags = this.ruleForm.zscqFmrList.filter(tag => tag !== removedTag)
            this.ruleForm.zscqFmrList = tags
            console.log('删除发明人', removedTag);
        },
        showInput() {
            this.inputVisible = true
            this.$nextTick(function () {
                this.$refs.input.focus()
            })
        },
        showZscqFmrInput() {
            this.zscqFmrVisible = true
            this.$nextTick(function () {
                this.$refs.zscqFmrInput.focus()
            })
        },
        handleInputChange(e) {
            this.inputValue = e.target.value
        },
        handleInputChangeZscqFmr(e) {
            this.zscqFmrValue = e.target.value
        },
        handleInputConfirmQlr() {
            const inputValue = this.inputValue
            let tagList = this.ruleForm.zscqQlrList
            if (inputValue && tagList.indexOf(inputValue) === -1) {
                tagList = [...tagList, inputValue]
            }
            Object.assign(this, {
                inputVisible: false,
                inputValue: ''
            })
            this.$set(this.ruleForm, 'zscqQlrList', tagList)
            if (this.ruleForm.zscqQlrList.length > 0) {
                this.$refs['ruleForm'].clearValidate('zscqQlrList')
            }
        },
        handleInputConfirmFmr() {
            const inputValue = this.zscqFmrValue
            let tagList = this.ruleForm.zscqFmrList
            if (inputValue && tagList.indexOf(inputValue) === -1) {
                tagList = [...tagList, inputValue]
            }
            Object.assign(this, {
                zscqFmrVisible: false,
                zscqFmrValue: ''
            })
            this.$set(this.ruleForm, 'zscqFmrList', tagList)
            if (this.ruleForm.zscqFmrList.length > 0) {
                this.$refs['ruleForm'].clearValidate('zscqFmrList')
            }
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.ant-modal-content {
    width: 100% !important;
}
</style>
